import * as React from "react";
import { inject, observer } from "mobx-react";
import { Link } from 'react-router-dom';
import { Layout, Icon, Menu } from 'antd';
import { HomeStore } from '../../../store';
import { menus } from '../../../basicData/data';

import "../home.less";

const { Sider } = Layout;
const { SubMenu } = Menu;

interface IProps {
  homeStore?: HomeStore;
  children?: AudioContextLatencyCategory;
}

interface State {
}

const initialState: State = {
};

type IState = Readonly<typeof initialState>;



@inject("homeStore")
@observer
class HomeSider extends React.Component<IProps, IState> {
  readonly state: IState = initialState;

  render() {

    return (
      <Sider
        trigger={null}
        collapsible
        collapsed={this.props.homeStore.collapsed}
      >
        <div className="home-logo" />
        <Menu theme="dark" mode="inline" selectedKeys={[this.props.homeStore.pathname]}>
          {menus().map((menu: Menus.MenuType , index: number) => (
            menu.type && menu.type === 'subMenu'
              ?
              (menu.show
                ?
                <SubMenu
                  key={index}
                  title={<span><Icon type={menu.icon} /><span>{menu.title}</span></span>}
                >
                  {menu.children.map((m) => (
                    m.show
                      ?
                      <Menu.Item key={m.key}>
                        <Icon type={m.icon} />
                        <span>{m.title}</span>
                        <Link to={m.link} ></Link>
                      </Menu.Item>
                      : ''
                  ))}
                </SubMenu>
                : '')
              :
              (menu.show
                ?
                <Menu.Item key={menu.key}>
                  <Icon type={menu.icon} />
                  <span>{menu.title}</span>
                  <Link to={menu.link} ></Link>
                </Menu.Item>
                : '')
          ))}
        </Menu>
      </Sider>);
  }
}

export default HomeSider